/*
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-09-30 23:09:59
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-11-06 14:40:12
 * @FilePath: \BLOG-plain\src\hooks\useIntersectionObserver.ts
 */

/**
 * @description: 监听元素是否进入可视区域
 * @param {boolean} isStatic 是否静态页面 默认为false  静态页面在 mounted 时执行监听 非静态页面在 updated 时执行监听
 * @param {string} selector 选择器 默认为.intersection-observer
 * @return {*} void
 */
import { onMounted, onUpdated } from 'vue';
export default function (isStatic: boolean = false, selector: string = '.intersection-observer') {
  // const intersectionObserver = () => {
  //   let obserer = new IntersectionObserver(entries => {
  //     entries.forEach(
  //       entry => {
  //         let target = entry.target as HTMLElement;
  //         const rect = entry.boundingClientRect; // 获取元素的位置信息
  //         if (rect.top > 0) {
  //           if (entry.isIntersecting) {
  //             target.style.transition = 'all 0.2s ease-in-out';
  //             target.style.transform = 'scale(1)';
  //           } else {
  //             target.style.transition = 'all 0.2s ease-in-out';
  //             target.style.transform = 'scale(0.75)';
  //           }
  //         }
  //       },
  //       {
  //         root: null,
  //         rootMargin: '0px',
  //         threshold: 0
  //       }
  //     );
  //   });
  //   const articleItems = document.querySelectorAll(selector);
  //   // 元素进入可视区域时添加动画效果 离开可视区域时移除动画效果
  //   articleItems.forEach(item => {
  //     obserer.observe(item);
  //   });
  // };
  // onMounted(() => {
  //   if (isStatic) intersectionObserver();
  // });
  // onUpdated(() => {
  //   if (!isStatic) intersectionObserver();
  // });
}
